<template>
  <div class="video-box" id="575130496733253video-box">
    <div class="video-box-shadow-parent">
      <div class="video-box-shadow" @touchend="clickVideo" @mousedown="clickVideo" ref="parentDom"></div>
      <audio ref="videoDom" loop src="https://static.jiyi.show/assets/jiangjie.mp3"></audio>
      <div class="gif-box">
        <img v-show="playType" src="https://static.jiyi.show/assets/20240822163502.gif" alt="" />
        <img v-show="!playType" src="https://static.jiyi.show/assets/20240822163502.png" alt="" />
      </div>
      <!-- https://static.jiyi.show/assets/playmov1.mp4 -->
    </div>
  </div>
  <div class="play" @click.stop="clickVideo"> 
    <i class="freeIcon" v-if="!playType">&#xe672;</i>
    <i class="freeIcon" v-else>&#xe671;</i>
  </div>
  <!-- <div class="play stop" @click="stop">暂停</div> -->
</template> 
 
<script setup langg="ts">
import { heards, url, urls } from '@/utils/request/upload';
import { ref, onMounted, watch, nextTick, onUnmounted, onActivated, computed } from 'vue';
const videoDom = ref();
const parentDom = ref();
const playType = ref(false);
onMounted(() => {
  // setTimeout(() => { 
  //   if (videoDom.value) { 
  //     animation(); 
  //   } else { 
  //     setTimeout(() => { 
  //       if (videoDom.value) {
  //         animation();
  //       } else {
  //       }
  //     }, 1000);
  //   }
  // }, 1000);
  // setTimeout(() => {
  //   if (videoDom.value) {
  //     videoDom.value.muted = false;
  //     videoDom.value.play();
  //   } else {
  //     setTimeout(() => {
  //       if (videoDom.value) {
  //         videoDom.value.muted = false;
  //         videoDom.value.play();
  //       }
  //     }, 3000);
  //   }
  // }, 3000);
});
const animation = () => {
  ////console.log();

  const observer = new IntersectionObserver((entries) => {
    let canTrigger = true; // 标记是否可以触发
    entries.forEach((entry) => {
      if (entry.isIntersecting && canTrigger) {
        // //console.log('失业');

        videoDom.value.play();
        if (videoDom.value.paused) {
          playType.value = false;
        } else {
          playType.value = true;
        }
        // 设置一个延迟时间，防止频繁触发
        canTrigger = false;
        setTimeout(() => {
          canTrigger = true;
        }, 500); // 设置延迟时间为 500 毫秒
      } else {
        videoDom.value.pause();
        playType.value = false;
      }
    });
  });
  observer.observe(parentDom.value);
};
const clickVideo = () => {
  playType.value = !playType.value;
  if (playType.value) {
    play();
  } else {
    stop();
  }
  event.preventDefault();
};
const play = () => {
  videoDom.value.play();

  // videoDom.value.volume = 1;
};
const handleWheel = () => {
  // videoDom.value.play();
};
const handleMouseEnter = () => {
  // videoDom.value.play();
};
const stop = () => {
  // playType.value = false;
  // videoDom.value.pause();
  videoDom.value.pause();
  // videoDom.value.volume = 1;
};
</script>

<style lang="less" scoped>
.video-box {
  position: relative;
  // display: flex;
  // align-items: flex-end;
  position: absolute;
  width: 100%;
  height: 100%;

  overflow: hidden;
  // z-index: 9999;

  :deep(audio) {
    position: relative;
    z-index: 9;

    opacity: 0;
    left: 0;
    top: 0;

    // border: 3px solid red;
  }
  .gif-box {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 9;
    img {
      width: 248px;
      position: absolute;
      bottom: 50px;
      right: 220px;
    }
  }
  video:focus {
    outline: none;
  }
}
.video-box-shadow-parent {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.video-box-shadow {
  top: 0;
  left: 0;
  position: absolute;
  z-index: 99;
  width: 100%;
  height: 100%;
}
.play {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 8vh;
  right: 430px;
  z-index: 999;
  font-size: 24px;
  line-height: 32px;
  width: 48px;
  height: 48px;
  background: #ffdc76;
  border-radius: 50%;
  .freeIcon {
    font-size: 24px;
    line-height: 24px;
    color: #000;
  }
}
</style>